<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.bg-ICBC{background-color: #999;}
			.ccard *,header *{color: rgba(255,255,255,0.8) !important;}	
			.ccard {position: relative;}
			.ccard-bank{}
			.ccard-bank .icon{font-size: 1.8em;}
			.ccard-btn{padding: 15px 0;}
			.ccard-date{}
			.ccard-amount{padding: 15px 0 5px;;}
			.ccard-bg{position: absolute;right: -20px;bottom: -20px;font-size: 9em;z-index: 0;opacity: .1;}
			.status{font-size: 12px;padding: 4px 8px 2px;border-radius: 15px;}
			.status-ing{border-color: #0062CC;color: #0062CC}
			.status-ed{border-color: #2AC845;color: #2AC845}
			nav.mui-bar{background-color: #F2F2F2;}
			.btn-pay{width: 100%;border-width: 0;border-radius: 0;height: 50px;font-size: 1.1em;}
			.btn-pay .icon-add{font-size: 1.1em;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bg-ICBC">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="txtCardName"></h1>
		</header>
		<div class="mui-content mb-60">
			<div class="mui-table-view ccard bg-ICBC margin-top-no nohover">
				<div class="mui-table-view-cell">
					<div class="mui-grid-view mui-table ccard-btn">
						<div class="mui-table-cell mui-col-xs-8">
							<div class="mui-h5">本月已还</div>
							<div class="mui-h2 pt-5"> 
								<span id="RepayedAmount" v-text="summary.RepayedAmount.toFixed(2)">0.00</span>&nbsp;
							</div>
						</div>
						<div class="mui-table-cell mui-col-xs-4 ccard-date mui-text-right text-middle">
							<p>账单日 <span id="BillingDate" v-text="formatCardDay(model.BillingDate)">--</span></p>
							<p>还款日 <span id="RepaymentDate" v-text="formatCardDay(model.RepaymentDate)">--</span></p>
						</div>
					</div>
					<div class="mui-grid-view mui-table ccard-amount">
						<div class="mui-table-cell mui-col-xs-4">
							<p>本月将还</p>
							<p><span id="BillingAmount" v-text="summary.BillingAmount.toFixed(2)">0.00</span>&nbsp;</p>
						</div>
						<div class="mui-table-cell mui-col-xs-4">
							<p>本月待还</p>
							<p><span id="UnrepayAmount" v-text="summary.BillingAmount.toFixed(2)">0.00</span>&nbsp;</p>
						</div>
						<div class="mui-table-cell mui-col-xs-4">
							<p>当前保证金</p>
							<p><span id="RepaymentAmount" v-text="summary.RepaymentAmount.toFixed(2)">0.00</span>&nbsp;</p>
						</div>
					</div>
					<div class="ccard-bg">
						<svg class="icon text-middle" aria-hidden="true">
							<use xlink:href="" id="iconLogo"></use>
						</svg>
					</div>
				</div>
			</div>
			<ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		        <li class="mui-table-view-cell mui-h4 mui-text-center"><span class="box-title">还款计划</span></li>
		        <template v-if="list.length != 0">
		        <li v-for="item in list" class="mui-table-view-cell" @tap="openItem(item)">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-8">
		                	<div class="mui-h5">{{formatDate(item.BeginDate)}}~{{formatDate(item.EndDate)}}</div>
		                    <h3>{{item.BillingAmount.toFixed(2)}}</h3>
		                </div>
		                <div class="mui-table-cell mui-col-xs-4 mui-text-right">
		                	<h5>共 {{item.Quantity}} 笔</h5>
		                    <div><button type="button" class="mui-btn status" :class="resources.GetRepaymentPlanStatusClassByValue(item.Status)">{{resources.GetRepaymentPlanStatusTextByValue(item.Status)}}</button></div>
		                </div>
		            </div>
		        </li>
		        </template>
		  </ul>
		</div>
		<footer>
			<button id="btnPay" type="button" class="mui-btn btn-pay mui-btn-danger open-window" data-url="ccard-plan.html"><span class="mui-icon iconfont icon-add"></span> 新增还款计划</button>
		</footer>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			
			var vm;
						
			formatDate = function (date) {
				return date.substr(date.indexOf("-")+1);
			}
			
			refresh = function () {
				vm.ajax();
			}
			
			init = function() {
				var wvself = plus.webview.currentWebview();
				var card = wvself.card;
				
				$id("btnPay").setAttribute("data-params", JSON.stringify({id:card.ID}));
				$id("txtCardName").innerText = formatBankCardShow(card);
								
				$id("iconLogo").setAttribute("xlink:href", "#icon-" + card.BankCode); 
				for(var i=0; i<mui( ".bg-ICBC").length; i++){ 
					mui( ".bg-ICBC")[i].style.backgroundColor=app.getBankName(card.BankCode).Color.replace("rgb", "rgba").replace(")", ",.7)"); 
				}
				
				vm = new Vue({
					el: '#list',
					data: {
						'model': card,
						'summary': {},
						'list': []
					},
					created: function() {
						this.$nextTick(function() {
							this.ajax();
						})
					},
					computed: {},
					methods: {
						ajax: function() {
							var _self = this;
							
							mui.showLoading(); 
							
							app.post('GetRepaymentPlanSummary', {CardID:_self.model.ID}, function(data) {
								_self.summary = data.Table[0];
								
								$id("BillingDate").innerText = formatCardDay(_self.model.BillingDate);
								$id("RepaymentDate").innerText = formatCardDay(_self.model.RepaymentDate);
								$id("RepayedAmount").innerText = _self.summary.RepayedAmount.toFixed(2);
								$id("BillingAmount").innerText = _self.summary.BillingAmount.toFixed(2);
								$id("UnrepayAmount").innerText = (_self.summary.BillingAmount-_self.summary.RepayedAmount).toFixed(2);
								$id("RepaymentAmount").innerText = _self.summary.RepaymentAmount.toFixed(2);								
							});
							app.post('GetRepaymentPlans', {CardID:_self.model.ID}, function(data) {
								_self.list = data.data;
								console.log(JSON.stringify(_self.list));
							});
						},
						openItem: function(data) {
							mui.openWindow({url:"ccard-plan-item.html", id:"ccard-plan-item.html", extras:{card:card,data:data}});
						}
					}
				});
			};
			
			mui.plusReady(function () {
				init();
			})
		</script>
	</body>

</html>